<template>
  <div class="native-select-wrapper" :class="{ 'is-disabled': disabled }">
    <select
      class="native-select"
      :value="modelValue"
      @change="handleChange"
      :disabled="disabled"
      :multiple="multiple"
      :size="size || 1"
    >
      <option v-if="placeholder" value="" :selected="!modelValue">{{ placeholder }}</option>
      <option
        v-for="item in options"
        :key="item.value || item"
        :value="item.value || item"
        :disabled="item.disabled"
        :selected="modelValue === (item.value || item)"
      >
        {{ item.label || item }}
      </option>
      <slot></slot>
    </select>
    <div class="native-select-arrow">
      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
        <path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
      </svg>
    </div>
    <div 
      v-if="clearable && modelValue" 
      class="native-select-clear"
      @click="handleClear"
    >
      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
        <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"></path>
      </svg>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue';

const props = defineProps({
  modelValue: {
    type: [String, Number, Boolean, Array],
    default: ''
  },
  options: {
    type: Array,
    default: () => []
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  multiple: {
    type: Boolean,
    default: false
  },
  size: {
    type: Number,
    default: null
  },
  clearable: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'change']);

const handleChange = (event) => {
  const value = event.target.value;
  emit('update:modelValue', value);
  emit('change', value);
};

const handleClear = (event) => {
  event.stopPropagation();
  emit('update:modelValue', '');
  emit('change', '');
};
</script>

<style scoped>
.native-select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 32px;
  box-sizing: border-box;
}

.native-select {
  width: 100%;
  height: 32px;
  padding: 0 30px 0 12px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  color: #606266;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.native-select:focus {
  border-color: #409eff;
}

.native-select:hover {
  border-color: #c0c4cc;
}

.native-select-wrapper.is-disabled .native-select {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}

.native-select-arrow {
  position: absolute;
  top: 0;
  right: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  color: #c0c4cc;
  pointer-events: none;
}

.native-select-wrapper:hover .native-select-arrow {
  color: #909399;
}

.native-select-clear {
  position: absolute;
  top: 0;
  right: 25px;
  height: 100%;
  display: flex;
  align-items: center;
  color: #c0c4cc;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.native-select-wrapper:hover .native-select-clear {
  opacity: 1;
}

.native-select-clear:hover {
  color: #909399;
}

/* CEF浏览器特殊样式 */
body.cef-browser .native-select {
  height: 32px;
  line-height: 32px;
  max-height: 32px;
}
</style> 